<template>
    <div class="main-container" id="main-container">
        <div style="background-color: #fff; height:100%;" id="ProductMasterData">
            <a-tabs   :lazy-load="true" type="card" @change="tabsChange" justify>
                <a-tab-pane title="布类定义" key="1">
                    <div style="height: 100%;">
                        <ClothSet></ClothSet>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="布种分类定义" key="2">
                    <div style="height: 100%;">
                        <ClothClass></ClothClass>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="布种类别定义" key="3">
                    <div style="height: 100%;">
                        <ClothCategory></ClothCategory>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="面料类别定义" key="4">
                    <div style="height: 100%;">
                        <FabricCategorys></FabricCategorys>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="成分类别" key="5">
                    <div style="height: 100%;">
                        <partType></partType>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="季节定义" key="6">
                    <div style="height: 100%;">
                        <SeasonSet></SeasonSet>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="收费项目" key="7">
                    <div style="height: 100%;">
                        <FeebasedItems></FeebasedItems>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="胶管名称" key="8">
                    <div style="height: 100%;">
                        <RubberhoseSet></RubberhoseSet>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="客户要求分类" key="9">
                    <div style="height: 100%;">
                        <ChargeProject></ChargeProject>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="客户要求分类项目定义" key="10">
                    <div style="height: 100%;">
                        <CustomerRequirements></CustomerRequirements>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="整理参数项目描述定义" key="11">
                    <div style="height: 100%;">
                        <OrganizeParameters></OrganizeParameters>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import emitter from '@/hooks/useEventBus'
export default defineComponent({
    name: 'masterDataSettings',
    setup() {

        const pageData = reactive({
            tableIndex: "1"
        })


        const tabsChange = (e: string | number) => {
            //    pageData.tableIndex = e as string
            emitter.emit('window-change')
            if (e === '1') {
                emitter.emit('ClothSet')
            } else if (e === '2') {
                emitter.emit('ClothClass')
            } else if (e === '3') {
                emitter.emit('ClothCategory')
            } else if (e === '4') {
                emitter.emit('FabricCategory')
            } else if (e === '5') {
                emitter.emit('partType')
            } else if (e === '6') {
                emitter.emit('SeasonSet')
            } else if (e === '7') {
                emitter.emit('FeebasedItems')
            } else if (e === '8') {
                emitter.emit('RubberhoseSet')
            } else if (e === '9') {
                emitter.emit('ChargeProject')
            } else if (e === '10') {
                emitter.emit('CustomerRequirements')
            } else if (e === '11') {
                emitter.emit('OrganizeParameters')
            }
        }
        return {
            pageData,
            tabsChange
        }
    }
})
</script>
<style scoped>
.main-container {
    height: 100%;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>